<template>
 <div id="home">
    <nav-bar class="home-nav">
      <template #center>
        <div>购物街</div>
      </template>
      </nav-bar>
      <tab-control :titles="['流行', '新款', '精选']" @tabClick="tabClick" ref="tabTop1" v-show="isTabFixed" class="tab-control"></tab-control>

     <scroll class="content" ref="scroll" :probe-type="3" @scroll="contentScroll" :pullUpLoad="true"
     @pullingUP="loadMore">
        <home-swiper :banners='banners' @swiperImageLoad="swiperImageLoad"></home-swiper>
      <recommend :recommends='recommends'></recommend>
      <feature-view></feature-view>
      <tab-control :titles="['流行', '新款', '精选']" @tabClick="tabClick" ref="tabTop2" ></tab-control>
      <goods-list :goods="goods[currentType].list"></goods-list>
     </scroll>

    <back-top @click.native="backClick" v-show="isShowBackTop"></back-top>
 </div>
</template>


<script>  //引用
import FeatureView from './childComps/FeatureView.vue'
import HomeSwiper from "childComps/HomeSwiper"
import Recommend from "childComps/Recommend"
import FeatureView from "childComps/FeatureView"

import Scroll from '../../components/common/scroll/Scroll.vue'
import NavBar from "@/components/common/navbar/NavBar"

import TabControl from "@/components/content/tabControl/TabControl"
import GoodsItem from "@/components/content/Goods/GoodsList"
import Backtop from "@/components/content/backtop/BackTop"

import {getHomeMultifata, getHomeGoods} from "@/network/home"

</script>

<script>

 export default {
   
   name: 'HomeOne',
   components: {
     NavBar,
     HomeSwiper,
     Recommend,
     FeatureView,
     TabControl,
     GoodsItem,
     Scroll,
     Backtop
   },
   data () {
     return {
       banners: [],
       recommend: [],
       goods: {
         'pop': {page: 0, list: []},
         'news': {page: 0, list: []},
         'sell': {page: 0, list: []},
       },

         currentType:'pop',
         isShowBackTop: true,
         topOffSet: 0,
         isTabFixed: false,
         saveY: 0
     }
   },
   created() {
    this.getHomeMultifata()
    this.getHomeGoods('pop')
    this.getHomeGoods('news')
    this.getHomeGoods('sell')

    
   },
   methods: {
     swiperImageLoad() {
     this.topOffSet = this.$refs.tabTop2.$el.offsetTop

     },

     debounce(func, delay) {
       let timer = null
       return function(...args) {
         if(timer) clearTimeout(timer)
         timer = setInterval(() => {
           func.apply(this, args)
         }, delay)
      }
     },
     TabClick(index) {
       switch(index) {
         case 0:
          this.currentType = 'pop'
          break
         case 1:``
           this.currentType = 'news'
           break
         case 2:
           this.currentType = 'sell'  
           break
       }
       this.$refs.tabTop2.currentIndex = index
       this.$refs.tabTop1.currentIndex = index
     },
     getHomeMultifata() {
        getHomeMultifata().then(res => {
       console.log(res);
      this.banners = res;
      this.recommend = res;
     })
     },
     getHomeGoods(type) {
       const page = this.goods[type].page + 1;
       getHomeGoods(type, page).then(res => {
      this.goods[type].list.push(...res.data.list)
      this.goods[type].page = page

      this.$refs.scroll.finishPullUp()
     })
     },
     backClick() {
       this.$refs.scroll.scrollTo(0, 0)
     },
     contentScroll(position) {
      //  console.log(position);
      this.isShowBackTop = -position.y > 1000
      this.isTabFixed = -position.y >545
     },
     loadMore() {
       this.getHomeGoods(this.currentType)
     },
   },
   mounted () {

     const refresh = this.debounce(this.$refs.scroll.refresh, 500)
     this.$bus.$on('imageLoad', () => {
      // this.$refs.scroll.refresh()
      refresh()
    })
   },
   computed: {
     activated () {
      this.$refs.scroll.scrollTo(0, this.saveY, 0)
      this.$refs.scroll.refresh()
    },
     deactivated () {
       this.saveY = this.$refs.scroll.getScrollY()
     }
   }
 }
</script>

<style scoped>
  #home {
    position: relative;
  }

  .home-nav {
    background-color: var(--color-tint);
    color: #fff;

    /* position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99; */
    
  }

  .content {
    height: 150px;
    background-color: deeppink;
    position: absolute;
    top: 44px;
    bottom: 49px;
    left: 0;
    right: 0;
  }

  .tab-control {
    position: relative;
  }
 
</style>
